<template>
  <div class="picture-pool">
    <select-bar :text="['图片', '链接']" @selectChange='selectChange'></select-bar>
    <div v-show="showOne">
      <search-add btnName='新增图片' @add-link="addPics" @searchinput="searchInputHandler"></search-add>
      <div class="picture-wrapper" :class="[picLength]">
        <div class="picture-item-wrapper"  v-for="(item, index) in picArr" :key="index" >
          <div class="picture-item">
            <div class="picture"><img class="item-pic" :src="item.image"  @error="imgError(item)" alt=""></div>
            <p class="txt">{{item.name}}</p>
            <div class="change-icon-wrapper">
              <icon-svg iconClass="picEdit" class="icon-pic" v-on:click.native="picEdit(index)"></icon-svg>
              <icon-svg iconClass="picDelete" class="icon-pic float-pic" @click.native="picDelete(index)"></icon-svg>
            </div>
          </div>
        </div>
      </div>
      <div class="foot-wrapper">
        <div class="block">
          <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page.sync="currentPage"
            :page-sizes="[21, 18, 15]"
            :page-size="pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total">
          </el-pagination>
        </div>
      </div>
      <pic-dialog :showAdd="showAdd" :dialogObj="dialogObj" @hidden-show="hiddenShow" @uploadpicture="uploadPic" ref="picDialog" ></pic-dialog>
    </div>
   <Linklist v-show="!showOne"></Linklist>
  </div>
</template>
<script>
import selectBar from '@/components/selectBar/selectBar'
import searchAdd from '@/components/searchAdd'
import picDialog from '@/components/picDialog'
import IconSvg from '../../components/Icon-svg/index.vue'
import Linklist from './Linklist.vue'
import { getPic, deletePic, searchPic} from '@/api/picPool'
export default {
  name: 'picturePool',
  data () {
    return {
      picArr: [],
      totalNum: undefined,
      currentPage: 1,
      pageSize:21,
      total:0,
      dialogPicAdd: true,
      dialogObj: {
        title: '',//新增图片
        inpName: '',//图片名称:
        btnName: '',//确认上传
        src: '',///static/img/shzats.png
        shade: '',
        placeholder: '',
        id:'',
        updateUserId:'',
        updateTime:'',
        storeId:''
      },
      // dialogObj:{},
      showAdd: false,
      showOne: true,
      picLength: 'change21',
      index: undefined,
      searchPlaceHolder:""
    }
  },
  components: {
    picDialog,
    IconSvg,
    selectBar,
    searchAdd,
    Linklist
  },
  methods: {
    imgError(item) {
       item.image = require('../../assets/img/shzats.png');
    },
    picDelete (index) {
      let _id = this.picArr[index].id
    //   console.log(_id,index)
    //   deletePic(_id).then(() => {
    //     this.$message({
    //       message: '恭喜你，删除成功',
    //       type: 'success'
    //     });
    //     this.picArr.splice(index,1)
    // this.getpiclist(this.pageSize,this.currentPage)
    // },(res)=>{
    //     this.$message({
    //       message: '删除失败',
    //       type: 'error'
    //     });
    // })
        this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {

      deletePic(_id).then(() => {
        this.$message({
          message: '恭喜你，删除成功',
          type: 'success'
        });
        this.picArr.splice(index,1)
    this.getpiclist(this.pageSize,this.currentPage)
    },(res)=>{
        this.$message({
          message: '删除失败',
          type: 'error'
        });
    })
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });          
        });
    },


    picEdit (index) {
      this.index = index
      this.dialogObj = {
        title: '编辑图片',
        inpName: '图片名称',
        btnName: '确认更改',
        src: this.picArr[index].image,
        shade: '点击更改图片',
        placeholder: this.picArr[index].name,
        id:this.picArr[index].id,
        name:this.picArr[index].name,
        updateUserId:this.picArr[index].updateUserId,
        updateTime:this.picArr[index].updateTime,
        storeId:this.picArr[index].storeId
      }
      console.log(this.dialogObj,"this.dialogObj")
      this.showAdd = true
    },
    selectChange (e) {
      if (e.target.innerHTML === '图片') {
        this.showOne = true
      } else if (e.target.innerHTML === '链接') {
        this.showOne = false
      }
//      console.log(e.target.innerHTML)
    },
    handleSizeChange (val) {
      let self = this
      this.pageSize=val
      let pagelist={
        page:this.currentPage,
        pageSize:this.pageSize
      }

      getPic(pagelist).then(res => {
        let data=res.data.data.slice(0, val)
        self.total=res.data.elementsSum
        data.forEach(item=>{
          item.image='http://172.17.99.10:10014//api/jp-TIFS-FileCenter-ms/file?businessId='+item.storeId
        })
        self.picArr = data;
        console.log(data,"**************")
    })

      console.log(`每页 ${val} 条`)
    },
    handleCurrentChange (val) {
      console.log(val,"handleCurrentChange=====val")
      let self=this
        let pagelist={
        page:val,
        pageSize:this.pageSize
      }
      console.log(pagelist,"handleCurrentChange***pagelist")
      if(!this.searchPlaceHolder){
      getPic(pagelist).then(res => {
        let data=res.data.data 
        self.total=res.data.elementsSum
        data.forEach(item=>{
          item.image='http://172.17.99.10:10014//api/jp-TIFS-FileCenter-ms/file?businessId='+item.storeId
        })
        self.picArr = data;
        console.log(data,"**************")
    })        
    }else{
        let pagelist={
        pageNum:val,
        pageSize:this.pageSize,
        name:this.searchPlaceHolder
      }
      searchPic(pagelist).then(res=>{
        self.total=res.data.elementsSum
        let data=res.data.data
        data.forEach(item=>{
          item.image='http://172.17.99.10:10014//api/jp-TIFS-FileCenter-ms/file?businessId='+item.storeId
        })
        self.picArr=data
      })   
    }
    },
    addPics () {
      let src='/static/img/upicon.png';
        this.dialogObj = {
          title: '新增图片',
          inpName: '图片名称:',
          btnName: '确认上传',
          src: src,
          shade: '',
          placeholder: '',
          createUserId:"",
          createTime:""
        }
      this.showAdd = true
    },
    hiddenShow () {
      this.showAdd = false
    },
    uploadPic (result) {
      let self = this
      this.showAdd=false
      let pagelist={
        page:this.currentPage,
        pageSize:this.pageSize
      }
      getPic(pagelist).then(res => {
        let data=res.data.data 
        this.total=res.data.elementsSum
        data.forEach(item=>{
          item.image='http://172.17.99.10:10014//api/jp-TIFS-FileCenter-ms/file?businessId='+item.storeId
        })
        this.picArr = data;
        console.log(data,"**************")
    })
    },
    getpiclist(pageSize,pagecur){
    let pagelist={
        page:this.currentPage,
        pageSize:this.pageSize
      }
      let self=this
      getPic(pagelist).then(res => {
        let data=res.data.data 
        self.total=res.data.elementsSum
        data.forEach(item=>{
          if(`'http://172.17.99.10:10014//api/jp-TIFS-FileCenter-ms/file?businessId='+${item.storeId}`){
             item.image='http://172.17.99.10:10014//api/jp-TIFS-FileCenter-ms/file?businessId='+item.storeId
          }
         
        })
        self.picArr = data;
        console.log(data,"**************")
    })
    },
    searchInputHandler(val){
      this.searchPlaceHolder=val
      let self=this
      if(!val){
      let pagelist={
        // page:this.currentPage,
        page:1,
        pageSize:this.pageSize
      }        
      getPic(pagelist).then(res => {
        this.currentPage=1
        let data=res.data.data 
        self.total=res.data.elementsSum
        data.forEach(item=>{
          item.image='http://172.17.99.10:10014//api/jp-TIFS-FileCenter-ms/file?businessId='+item.storeId
        })
        self.picArr = data;
    })
      }else{
      let pagelist={
        pageNum:1,
        // pageNum:this.currentPage,
        pageSize:this.pageSize,
        name:val
      } 
      this.currentPage=1
      searchPic(pagelist).then(res=>{
        self.total=res.data.elementsSum
        let data=res.data.data
        data.forEach(item=>{
          item.image='http://172.17.99.10:10014//api/jp-TIFS-FileCenter-ms/file?businessId='+item.storeId
        })
        self.picArr=data
      })        
     }
    }
  },
  mounted () {
    this.getpiclist(this.pageSize,this.currentPage)
  },
  updated () {
    this.$refs.picDialog.preClick()
    this.$refs.picDialog.inputPicName = this.dialogObj.placeholder
  }
}
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
.picture-pool {
  position: relative;
  width: 100%;
  height: 948px;
  background-color: #fff;
  .picture-wrapper {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    width: 1548px;
    height: 680px;
    overflow: hidden;
    padding: 38px 0 42px 0;
    &.change21{
      width: 96.5%;
      padding-left: 26.75px;
      padding-right: 26.75px;
      .picture-item-wrapper {
        flex-basis: 14.2857%;
      }
    }
    &.change18{
      width: 93%;
      padding-left: 42px;
      padding-right: 42px;
      .picture-item-wrapper {
        flex-basis: 16.666666%;
      }
    }
    &.change15{
      width: 91%;
      padding-left: 62.333px;
      padding-right: 62.333px;
      .picture-item-wrapper {
        flex-basis: 20%;
      }
    }
    .picture-item-wrapper {
      display: flex;
      justify-content: center;
      flex: 0;
      .picture-item {
        width: 160px;
        height: 186px;
        padding-top: 14px;
        border-radius: 3px;
        box-shadow:  0 7px 12px 4px #e2e2e2;
        background-color: #f0f4fa;
        .picture {
          position: relative;
          width: 120px;
          height: 120px;
          margin: 0 20px 12px 20px;
          display: flex;
          justify-content: center;
          overflow: hidden;
          user-select: none;
          background-color: #29333d;
          .item-pic {
            position: absolute;
            max-width: 120px;
            max-height: 120px;
            margin: auto;
            margin-left: -100px;
            top: 0;
            bottom: 0;
            border-right: 45px solid transparent;
            filter: drop-shadow(123px 0 #93c4ff);
          }
        }
        .txt {
          margin: 12px 0;
          text-align: center;
          line-height: 18px;
          font-size: 18px;
          white-space:nowrap;
          text-overflow:ellipsis;
          overflow:hidden;
        }
        .change-icon-wrapper {
          position: relative;
          margin: 10px 0 0 46px;
          .icon-pic {
            width: 20px;
            height: 20px;
            float: left;
            margin-right: 24px;
            &.float-pic {
              width: 22px;
              height: 22px;
              margin: -2px;
              margin-right: 46px;
            }
          }
        }
      }
    }
  }
  .foot-wrapper {
    margin-left: 26px;
  }
}
</style>
